<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a {
				margin: 50px auto;
				width: 800px;
				height: 500px;
			}
		</style>
		<script src="js/echarts.js"></script>
		<script src="js/china.js"></script>
	</head>
	<body>
		<div id="main" class="a"></div>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'));
			var COLORS = ["#ffffff", "#faebd2", "#e9a188", "#d56355", "#bb3937", "#772526", "#480f10"];
			var dataList = [{
					name: "南海诸岛",
					value: 0
				},
				{
					name: '北京',
					value: 593
				},
				{
					name: '天津',
					value: 189
				},
				{
					name: '上海',
					value: 838
				},
				{
					name: '重庆',
					value: 579
				},
				{
					name: '河北',
					value: 328
				},
				{
					name: '河南',
					value: 1276
				},
				{
					name: '云南',
					value: 184
				},
				{
					name: '辽宁',
					value: 146
				},
				{
					name: '黑龙江',
					value: 913
				},
				{
					name: '湖南',
					value: 1019
				},
				{
					name: '安徽',
					value: 991
				},
				{
					name: '山东',
					value: 787
				},
				{
					name: '新疆',
					value: 76
				},
				{
					name: '江苏',
					value: 653
				},
				{
					name: '浙江',
					value: 1268
				},
				{
					name: '江西',
					value: 937
				},
				{
					name: '湖北',
					value: 68128
				},
				{
					name: '广西',
					value: 973
				},
				{
					name: '甘肃',
					value: 40
				},
				{
					name: '山西',
					value: 193
				},
				{
					name: '内蒙古',
					value: 194
				},
				{
					name: '陕西',
					value: 277
				},
				{
					name: '吉林',
					value: 106
				},
				{
					name: '福建',
					value: 106
				},
				{
					name: '贵州',
					value: 147
				},
				{
					name: '广东',
					value: 1582
				},
				{
					name: '青海',
					value: 18
				},
				{
					name: '西藏',
					value: 1
				},
				{
					name: '四川',
					value: 561
				},
				{
					name: '宁夏',
					value: 57
				},
				{
					name: '海南',
					value: 168
				},
				{
					name: '台湾',
					value: 425
				},
				{
					name: '香港',
					value: 1029
				},
				{
					name: '澳门',
					value: 45
				}
			]
			var option = {
				title: {
				  text: '新型冠状病毒肺炎----全国疫情地图', 
				},
				tooltip: {
					formatter: function(params, ticket, callback) {
						return params.seriesName + '<br />' + params.name + '：' + params.value
					}
				},
				backgroundColor: '#eeeeee',
				visualMap: {
					type: 'piecewise',
					orient: 'horizontal',
					left: 'left',
					top: 'bottom',
					pieces: [{
						value: 0,
						color: COLORS[0]
					}, {
						min: 1,
						max: 9,
						color: COLORS[1]
					}, {
						min: 10,
						max: 99,
						color: COLORS[2]
					}, {
						min: 100,
						max: 499,
						color: COLORS[3]
					}, {
						min: 500,
						max: 999,
						color: COLORS[4]
					}, {
						min: 1000,
						max: 10000,
						color: COLORS[5]
					}, {
						min: 10000,
						color: COLORS[6]
					}],
					inRange: {
						color: COLORS
					},

					show: true
				},
				geo: {
					map: 'china',
					roam: false,
					zoom: 1.23,
					label: {
						normal: {
							show: true,
							fontSize: '10',
							color: 'rgba(0,0,0,0.7)'
						}
					},
					itemStyle: {
						normal: {
							borderColor: 'rgba(0, 0, 0, 0.2)'
						},
						emphasis: {
							areaColor: '#F3B329',
							shadowOffsetX: 0,
							shadowOffsetY: 0,
							shadowBlur: 20,
							borderWidth: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				},
				series: [{
					name: '确诊人数',
					type: 'map',
					geoIndex: 0,
					data: dataList
				}]
			}
			myChart.setOption(option);
		</script>
	</body>
</html>
